<template>
	<div class="main_content">
		<div class="top_seach">
			<div class="btns">
				<el-button type="primary" icon="el-icon-plus" @click="handleAdd"
					style="margin-right: 10px;">新增</el-button>
				<el-input v-model="input" placeholder="请输入内容" clearable style="margin-right: 10px;" />
				<el-button type="primary" icon="el-icon-search" @click="handleSearch"
					style="margin-right: 10px;">搜索</el-button>
			</div>
		</div>
		<div class="content_table">
			<el-table :data="tableData" style="width: 100%" >
				<el-table-column type="expand">
					<template slot-scope="props">
						<el-form label-position="left" inline class="demo-table-expand" 
							style="display: flex;">
							<div class="ImgBox">
								<el-form-item>
									<img :src="'/api/file/'+props.row.shopPicture" width="200" />
								</el-form-item>
							</div>
							<div class="InfoBox">
								<el-form-item label="商品名称">
									<span>{{ props.row.farmName }}</span>
								</el-form-item>
								<el-form-item label="商品类别">
									<span>{{
										 props.row.sortContent
										}}</span>
								</el-form-item>
								<el-form-item label="商品销量">
									<span>{{ props.row.salesVolume }}</span>
								</el-form-item>
								<el-form-item label="状态">
									<span>{{ props.row.status == 0 ? '下架':'上架' }}</span>
								</el-form-item>
								<el-form-item label="上架时间">
									<span>{{ props.row.createTime }}</span>
								</el-form-item>
								<el-form-item label="更新时间">
									<span>{{ props.row.updateTime }}</span>
								</el-form-item>
								<el-form-item label="商品描述" style="display: flex; overflow: hidden;">
									<span>{{ props.row.farmIntro }}</span>
								</el-form-item>
							</div>
						</el-form>
					</template>
				</el-table-column>
				<el-table-column label="商品 ID" prop="farmId" width="130">
				</el-table-column>
				<el-table-column label="商品名称" prop="farmName" width="200">
				</el-table-column>
				<el-table-column label="销量" prop="salesVolume" width="200">
				</el-table-column>
				<el-table-column prop="type" label="分类" width="180" :filters="sortData" :filter-method="filterTag"
					filter-placement="bottom-end">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.sortId" type="success">{{scope.row.sortContent}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="状态">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.status === 0" type="warning">下架</el-tag>
						<el-tag v-if="scope.row.status === 1" type="success">上架</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="描述" prop="farmIntro" show-overflow-tooltip>
				</el-table-column>
				<el-table-column label="操作" fixed="right" width="180">
					<template slot-scope="scope">
						<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
						<el-button size="mini" type="danger"
							@click="handleDelete(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="footer_page">
			<el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize"
				layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
		</div>
		<EditorFarm ref="editFarm"></EditorFarm>
		<AddFarm ref="addFarm"></AddFarm>
	</div>

</template>

<script>
	import EditorFarm from "../../components/backstage/EditorFarm.vue"
	import AddFarm from "../../components/backstage/AddFarm.vue"
	import farmApi from "@/api/farm.js"
	import sortApi from "@/api/sort.js"
	import moment from 'moment'
	export default {
		components: {
			EditorFarm,
			AddFarm
		},
		data() {
			return {
				expands: [],
				total: 0,
				pageSize: 5,
				currentPage: 1,
				input: "",
				tableData: [],
				sortData: [],
				expandedRow: -1
			}
		},
		methods: {
			handleExpandChange(row, expandedRows) {
				if (expandedRows.length > 1) {
					// 只允许展开一行，当展开第二行时，关闭之前展开的行
					this.expandedRow = expandedRows[0].$index;
				} else if (expandedRows.length === 0) {
					// 如果所有行都关闭了，重置展开行索引
					this.expandedRow = -1;
				}
			},
			handleEdit(index, row) { //编辑点击事件
				console.log(index, row);
				this.$refs.editFarm.dialogFormVisible = true;
				this.$refs.editFarm.form = JSON.parse(JSON.stringify(row));
				this.$refs.editFarm.inputsGroups = JSON.parse(JSON.stringify(row.specificationBeans));
				this.$refs.editFarm.form.status = this.$refs.editFarm.form.status == 0 ? "下架" : "上架";
				this.$refs.editFarm.sortData = this.sortData;
			},
			handleAdd() {
				this.$refs.addFarm.dialogFormVisible = true;
				this.$refs.addFarm.sortData = this.sortData;
			},
			handleDelete(index, row) { //删除点击事件
				this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.deleteFarm(row),
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			async deleteFarm(row) {
				const res = await farmApi.deleteFarm("/znFarmproduce/deleteFarm/" + row.farmId);
				this.FarmAll();
			},
			async handleSearch() { //搜索
				const res = await farmApi.SearchFarm("/znFarmproduce/SearchFarm");
				this.FarmAll();
			},
			filterTag(value, row) {
				return row.sortId === value;
			},
			async FarmAll() {
				const res = await farmApi.SearchFarmAll("/znFarmproduce/SearchFarmAll", {
					input: this.input,
					pageId: this.currentPage,
					pageSize: this.pageSize
				});
				if (res.code == 200) {
					this.tableData = res.data.records;
					this.total = res.data.total;
				}
			},
			async queryAllSort() { //查询分类
				this.sortData = [];
				const res = await sortApi.queryAllSort("/znSort/queryAllSort");
				if (res.code == 200) {
					let listSort = [];
					listSort = res.data;
					listSort.forEach(e => {
						this.sortData.push({
							text: e.sortContent,
							value: e.sortId
						})
					})
				}
			},
			handleCurrentChange(page) {
				this.currentPage = page;
				this.FarmAll()
			}
		},
		created() {
			this.FarmAll()
			this.queryAllSort();
		}
	}
</script>

<style lang="scss">
	.main_content {
		height: 100%;

		.top_seach {
			height: 7%;
			position: relative;

			.btns {
				display: flex;
				position: absolute;
				left: 38%;
				top: 30%;
			}
		}

		.content_table {
			height: 83%;

			.demo-table-expand {
				font-size: 0;

			}

			.demo-table-expand label {
				width: 90px;
				color: #99a9bf;
			}

			.demo-table-expand .el-form-item {
				margin-right: 0;
				margin-bottom: 0;
				width: 50%;
			}

			.ImgBox {
				margin: 0 20px 0 20px;
			}

			.InfoBox {}
		}

		.footer_page {
			height: 10%;
			.el-pagination {
				position: absolute;
				right: 2%;
				bottom: 50%;
				transform: translateY(-50%);

			}
		}

	}
</style>